<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插槽</title>
    <script src="./../vue/vue.js"></script>
</head>
<body>
    <!-- 
        插槽 slot
            1、 插槽内容
                文本
                标签
            
            2、编译作用域名
                不可访问组件内部的数据
                “父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。”

            3、后备内容
                子组件中 <slot>后备内容</slot> 如果标签中间有内容，则此内容为后备内容。外部设置则替换，外部不设置则使用后备内容

            4、具名插槽

                设置： <slot name="slotName"></slot>
                调用： <template v-slot:slotName></template>
            
            5、作用域插槽 （ 带参 插槽 ）
                设置： <slot v-bind:people="people"></slot>    // 这里的people 传递给 插槽， 在组件调用处使用
                调用： <template v-slot:default="slotProps">{{ slotProps.people.name }}</template>
            
                独占默认插槽的缩写写法
                解构插槽的 props 
            
            6、动态插槽名
                调用： <template v-slot:[name]></template>
            
            7、具名插槽的缩写 # 

            8、其他实例子


     -->
    <div id="app">

        <div>
            <custom-a @click="onClickATag">
                这里是插槽显示的内容{{ content }}
            </custom-a>
        </div>
        <br>
        <div>
            <custom-a @click="onClickATag">
                <template v-slot:default="slotProps">
                    这里使用作用域插槽， 带参数 插槽。获取组件内部的属性 {{ slotProps.content }}
                </template>
            </custom-a>

            <!-- 缩写写法 -->
            <custom-a v-slot="{ content }">
                test {{ content }}
            </custom-a>
        </div>
        <br>
        <!-- 后备内容 -->
        <div>
            <custom-a @click="onClickATag"></custom-a>
        </div>

        <!-- 具名插槽 -->
        <div>
            <named-slot-custom>
                <template #header>
                    这里显示头部
                </template>
                <template #main>
                    这里显示主体
                </template>
                <template #footer>
                    这里显示尾部
                </template>
            </named-slot-custom>
        </div>

        <!-- 其他实例子 这个例子不好 实际上插槽的目的是将子组件的部分地方交由 外界定制。这样达到分离逻辑的作用 -->
        <div>
            <todo-list :todos="todoList">
                <template #todo="{ todo }" >
                    <div>{{ todo.name }}<span>{{ todo.complated?'👌':'' }}</span></div>
                </template>
            </todo-list>
        </div>



    </div>
    
    <script>


        Vue.component("custom-a",{
            data: function(){
                return {
                    innerContent: "这是内部的内容"
                }
            },
            template: `
            <a href="#" @click.prevent="$emit('click')">
                <slot v-bind:content="innerContent"> {{ innerContent }} </slot>
            </a>
            `
        })


        Vue.component("named-slot-custom",{
            template: `
            <div>
                <header>
                    <slot name="header"></slot>
                </header>
                <main>
                    <slot name="main"></slot>
                </main>
                <footer>
                    <slot name="footer"></slot>
                </footer>
            </div>
            `
        })


        Vue.component("todo-list",{
            props: ["todos"],
            template: `
            <ul>
                <li v-for="todo in todos" :key="todo.id">
                    <slot name="todo" v-bind:todo="todo"></slot>
                </li>
            </ul>
            `
        })

        let vm = new Vue({
            el: "#app",
            data: {
                content: "这是外部的内容",
                todoList: [
                    {id:0,name: "给小树浇水",complated: false},
                    {id:1,name: "写作业",complated: true},
                    {id:2,name: "给妈妈捶捶背",complated: true},
                    {id:3,name: "洗澡澡",complated: false},
                    {id:4,name: "打打篮球",complated: false},
                    {id:5,name: "成为厉害的人",complated: false},
                ]
            },
            methods: {
                onClickATag(){
                    console.log("onClickATag")
                }
            },
        })
    </script>
</body>
</html>